<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: #6ff;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
<script>
    // parseInt() parseFloat()  主要用来处理数字和字符串 ,其他类型 => NaN

    // parseInt()   把其他类型转化为整型(整数)    1.去单位  2.向下取整
    // 规律: 找到第一个非数字之前的数  将其转为整数 
    
    // parseFloat()  把其他类型转化为浮点的型(可以保留小数)
    // 规律: 找到第一个非数字之前的数  保留小数 

    /* var width = "200px"; // => 200
    var width = "2a00px"; // => 2
    var width = "a200px"; // => NaN

    var width = 200.55;   // => 200
    var result = parseInt(width);
    console.log(result); */


    var width = "200px"; // => 200
    var width = "200.55px"; // => 200.55
    var width = "2a00.55px"; // => 2
    
    var width = 200.55; // => 200.55
    var result = parseFloat(width);
    console.log(result);


</script>
</html>